<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg{border: 1px solid #333;}
		</style>
	</head>
	<body>
		<svg width="600" height="400">
			<!-- <line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="10"></line> -->
		<!-- 	<rect x="100" y="100" width="100" height="200" fill="tomato" stroke="blue" 
			stroke-width="10">
			</rect>
			 -->
			
			
			<!-- <circle cx="300" cy="200" r="100" fill="none" stroke="blue"></circle> -->
			
		<!-- 	
			<line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="10"></line>
			<line x1="200" y1="200" x2="300" y2="100" stroke="red" stroke-width="10"></line>
			<line x1="300" y1="100" x2="400" y2="200" stroke="red" stroke-width="10"></line> -->
			
	<!-- 		<polyline points="100 100 200 200 300 100 400 200 500 100" 
			fill="none" 
			stroke="red"
			stroke-width="10"
			></polyline> -->
			
			
			<!-- 线性渐变 -->
			<!-- <defs>
				<linearGradient id="grad1" >
					<stop offset="0%" stop-color="red"></stop>
					<stop offset="100%" stop-color="blue"></stop>
				</linearGradient>

			</defs>
			
			
			<rect x="0" y="0" width="200" height="200" fill="url(#grad1)" ></rect> -->
			
			
			<!-- 径向渐变 -->
			<defs>
				<radialGradient 
					id="grad2" 
					fx="0.5" fx="0" cy="0.5" cy="0.5" r=".5"
				>
					<stop stop-color="blue" offset="0%"></stop>
					<stop stop-color="orange" offset="100%"></stop>
				</radialGradient>
			</defs>
			
			<circle cx="300" cy="200" r="200" fill="url(#grad2)"></circle>
		</svg>
	</body>
</html>
